<template>
  <view class="content">
    <view class="finishch">
      <view class="out-content">
        <view class="section-1">
          <view class="section-body">
            <view
              :class="`item ${curBoard === item.state ? 'item__on' : ''}`"
              v-for="item in board"
              :key="item.name"
            >
              <view class="shape" v-if="item.right"></view>
              <view class="shape2" v-if="item.bottom"></view>
              <view class="top">{{ item.name }}</view>
              <view class="bottom"
                >{{ item.count }}<text>{{ item.unit }}</text></view
              >
            </view>
          </view>
        </view>
      </view>
      <view class="section-0">
        <view class="section-body">
          <!-- <view class="form">
            <view class="form-item">
              <view class="label">项目名称</view>
              <view class="shape"></view>
              <view class="input">
                <u--input
                  placeholderClass="input-placeholder"
                  class="input-body"
                  placeholder="项目名称"
                  v-model="form.project_name"
                ></u--input>
              </view>
            </view>
            <view class="actions">
              <view class="action" @click="handleResetForm()">
                <text>重</text>
                <text>置</text>
              </view>
              <view class="action search" @click="handleSearch()">
                <text>查</text>
                <text>询</text>
              </view>
            </view>
          </view> -->
          <view class="list">
            <view
              :class="`item ${item.show ? 'item__expand' : ''}`"
              v-for="(item, index) in list"
              :key="item.link_project_id + index"
            >
              <view class="parent" @click="expandChange(item.link_project_id)">
                <image
                  src="../../../../static/weixian.png"
                  v-if="item.not_count != 0"
                  mode="aspectFit"
                  class="image"
                ></image>
                <image
                  src="../../../../static/anquan.png"
                  v-if="item.not_count == 0"
                  mode="aspectFit"
                  class="image"
                ></image>
                <view class="name">{{ item.project_name }}</view>
                <view class="count1" v-if="item.not_count == 0"
                  >({{ item.all_count }}/{{ item.all_count }})</view
                >
                <view class="count1" v-if="item.not_count != 0"
                  >({{ item.all_count - item.not_count }}/{{
                    item.all_count
                  }})</view
                >
                <view class="action" style="margin-left: -572rpx">
                  <view class="iconfont icon-xiangyou1"></view>
                </view>
              </view>
              <view class="child" v-if="item.show">
                <view
                  class="child-item"
                  @click="go(item2)"
                  v-for="(item2, idx) in item.children"
                  :key="item2.link_project_id + idx"
                >
                  <view class="top">
                    <view class="name"
                      >{{ index + 1 }}-{{ idx + 1 }}.{{
                        item2.project_name
                      }}</view
                    >
                    <view class="count2" v-if="item2.not_count == 0"
                      >({{ item2.all_count }}/{{ item2.all_count }})</view
                    >
                    <view class="count2" v-if="item2.not_count != 0"
                      >({{ item2.all_count - item2.not_count }}/{{
                        item2.all_count
                      }})</view
                    >
                    <view class="action">
                      <view class="iconfont icon-xiangyou1"></view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getProjectListApi,
  getProjectListSonApi,
  getSampleStatistics,
} from "@/api/statistics.js";
export default {
  onLoad() {
    this.getProjectListApi();
    this.SampleStatistics();
  },
  data() {
    return {
      list: [],
      name: "",
      curBoard: 1,
      form: {
        project_name: "",
      },
      board: [
        {
          name: "全部项目",
          count: 0,
          right: true,
          bottom: true,
          type: "risk_num",
          state: 1,
        },
        {
          name: "已执行项目",
          count: 0,
          right: true,
          bottom: true,
          type: "risk_num_2",
          state: 2,
        },
        {
          name: "未执行项目",
          count: 0,
          bottom: true,
          type: "risk_num_3",
          state: 3,
        },
      ],
    };
  },
  methods: {
    go(item2) {
      uni.navigateTo({
        url: "progressModelDetail?id=" + item2.id,
      });
    },

    async SampleStatistics() {
      const { data } = await getSampleStatistics();
      console.log(data.data, 666);
      // this.board[0].count=data.data.completed + data.data.incomplete
      // this.board[1].count=data.data.completed
      // this.board[2].count=data.data.incomplete
    },

    async expandChange(id) {
      const dep = JSON.parse(JSON.stringify(this.list));
      let _idx = undefined;
      dep.forEach((item, idx) => {
        if (item.link_project_id === id) {
          if (dep[idx].show) {
            dep[idx].show = false;
          } else {
            dep[idx].show = true;
            _idx = idx;
            if (!dep[idx].children) {
              dep[idx].children = [];
            }
          }
        }
      });
      if (
        _idx !== undefined &&
        dep[_idx].children &&
        dep[_idx].children.length === 0
      ) {
        uni.showLoading({
          title: "加载中...",
        });
        const { data } = await getProjectListSonApi({
          project_id: id,
        });
        uni.hideLoading();
        dep[_idx].children = data.data;
      }
      this.list = dep;
      console.log(this.list, 111);
    },
    async getProjectListApi() {
      uni.showLoading({
        mask: true,
      });
      let j = await getProjectListApi();
      if (j.data.code == 1) {
        this.list = j.data.data;
        this.board[0].count = this.list.length;
        this.list.forEach((item) => {
          if (item.all_count - item.not_count != 0) {
            this.board[1].count++;
          }
        });
        this.board[2].count = this.board[0].count - this.board[1].count;
        console.log(this.list, 222);
      }
      uni.hideLoading();
    },
  },
};
</script>

<style lang="scss" scoped>
.out-content {
  background-color: #2e5efe;
  .section-1 {
    width: 100%;
    height: 157rpx;
    background-color: #1534ce;
    border-top-left-radius: 50rpx;
    border-top-right-radius: 50rpx;
    overflow: hidden;

    .section-body {
      width: 670rpx;
      margin-left: 40rpx;
      margin-right: 40rpx;
      padding-bottom: 50rpx;
      padding-top: 20rpx;
      background-color: #1534ce;
      background-size: cover;
      background-repeat: no-repeat;
      overflow: hidden;
      box-sizing: border-box;

      .item {
        width: 33.33%;
        float: left;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        height: 100rpx;
        position: relative;
        padding-top: 20rpx;
        padding-bottom: 20rpx;

        .shape {
          width: 4rpx;
          height: 84rpx;
          background-image: linear-gradient(
            rgba(#3658f2, 0.3) 0%,
            #3658f2 30%,
            #3658f2 70%,
            rgba(#3658f2, 0.3) 100%
          );
          position: absolute;
          right: 0;
          top: 28rpx;
        }

        .shape2 {
          height: 4rpx;
          width: 172rpx;
          background-image: linear-gradient(
            90deg,
            rgba(#3658f2, 0.3) 0%,
            #3658f2 30%,
            #3658f2 70%,
            rgba(#3658f2, 0.3) 100%
          );
          position: absolute;
          left: 0;
          right: 0;
          margin: 0 auto;
          bottom: -2rpx;
        }

        .top {
          width: 100%;
          text-align: center;
          font-size: 16rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: #95c4fa;
        }

        .bottom {
          width: 100%;
          text-align: center;
          font-size: 58rpx;
          font-weight: bold;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: #ffde00;

          text {
            font-size: 26rpx;
            font-weight: normal;
            letter-spacing: 0rpx;
            color: #87c6ff;
          }
        }
      }
    }
  }
}

.content {
  background-color: #2e5efe;
}
.finishch {
  width: 100%;
  background-color: #0534d6;
  border-top-left-radius: 50rpx;
  border-top-right-radius: 50rpx;
}
.cs {
  font-size: 15px;
  padding: 20px 0 20px 30px;
  color: #65a0f4;
}
.cs span {
  font-weight: bold;
  color: #ffffff;
  margin-left: 10px;
}

.section-0 {
  width: 100%;
  position: relative;
  z-index: 10;

  .section-body {
    width: 100%;
    height: 100%;
    border-top-left-radius: 50rpx;
    border-top-right-radius: 50rpx;
    background-color: #fff;
    overflow: hidden;

    .tab {
      width: 100%;
      height: 80rpx;
      @include clear();
      background-color: #1534ce;

      .item {
        width: 33.33%;
        float: left;
        height: 80rpx;
        background-color: #1534ce;
        position: relative;

        .label {
          height: 80rpx;
          line-height: 80rpx;
          position: relative;
          z-index: 10;
          box-sizing: border-box;
          text-align: center;
          width: 100%;
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: #ffffff;
        }

        .shape {
          z-index: 1;
          width: 50rpx;
          height: 50rpx;
          position: absolute;
          bottom: 0;
          left: -50rpx;
          background: #000;
          display: none;
          background-color: #fff;
          overflow: hidden;

          .shape-body {
            width: 50rpx;
            height: 50rpx;
            background-color: #1534ce;
            border-bottom-right-radius: 40rpx;
          }
        }

        .shape-mirrow {
          z-index: 1;
          left: 0;
          display: none;

          .shape-body {
            border-bottom-right-radius: 0rpx;
            border-bottom-left-radius: 40rpx;
          }
        }
      }

      .item__active {
        border-top-left-radius: 40rpx;
        border-top-right-radius: 40rpx;
        background-color: #fff;

        .label {
          color: #46464a;
        }

        .shape {
          display: block;
        }

        .shape-mirrow {
          display: none;
        }
      }

      .item__active_next {
        border-bottom-right-radius: 50rpx;

        .shape {
          display: none;
        }

        .shape-mirrow {
          display: block;
        }
      }
    }

    .list {
      width: 670rpx;
      box-sizing: border-box;
      margin-left: 40rpx;
      border-top: 2rpx solid #d8e4f2;

      .item {
        width: 100%;
        border-bottom: solid 2rpx #f2f2f0;

        .parent {
          width: 100%;
          @include clear();
          .image {
            position: absolute;
            width: 15px;
            height: 15px;
            margin-top: 12px;
            margin-left: 635rpx;
          }
          .name {
            width: 75%;
            line-height: 30rpx;
            padding: 26rpx 0;
            margin-left: 15px;
            font-size: 26rpx;
            font-weight: normal;
            font-stretch: normal;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            letter-spacing: 2rpx;
            color: #3b3c40;
            float: left;
            word-break: break-all;
          }
          .count1 {
            width: 5%;
            line-height: 30rpx;
            padding: 26rpx 0;
            font-size: 26rpx;
            font-weight: normal;
            font-stretch: normal;
            white-space: nowrap;
            color: #3b3c40;
            float: left;
            word-break: break-all;
          }

          .count {
            float: right;
            min-width: 46rpx;
            height: 46rpx;
            margin-top: 18rpx;
            border-radius: 28rpx;
            line-height: 46rpx;
            text-align: center;
            font-size: 26rpx;
            font-weight: bold;
            color: #395cf5;
            background: #ffde00;

            // margin-right: 40rpx;
            text {
              font-size: 16rpx;
            }
          }

          .action {
            float: left;
            width: 32rpx;
            margin-right: 18rpx;
            height: 100%;
            line-height: 82rpx;
            text-align: center;
            color: #3b3c40;

            .iconfont {
              font-size: 32rpx;
              transition: 0.2s ease;
              transform: rotate(90deg);
            }
          }
        }

        .child {
          width: 750rpx;
          margin-left: -40rpx;
          background: #f2f2fa;

          .child-item {
            width: 620rpx;
            margin-left: 90rpx;
            border-bottom: 2rpx solid #e3e8f5;

            &:last-child {
              border-bottom: none;
            }

            .top {
              width: 100%;
              overflow: hidden;
              height: 100rpx;

              .name {
                float: left;
                width: 70%;
                height: 40rpx;
                line-height: 40rpx;
                color: #3b3c40;
                font-size: 26rpx;
                padding: 30rpx 0;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
              }
              .count2 {
                float: left;
                width: 5%;
                height: 40rpx;
                line-height: 40rpx;
                color: #3b3c40;
                font-size: 26rpx;
                padding: 30rpx 0;

                white-space: nowrap;
              }

              .action {
                width: 40rpx;
                height: 100rpx;
                line-height: 100rpx;
                float: right;
                text-align: right;

                .iconfont {
                  font-size: 32rpx;
                  color: #7f98ae;
                }
              }
            }
          }
        }
      }

      .item__expand {
        .parent {
          .action {
            .iconfont {
              transform: rotate(-90deg);
            }
          }
        }

        .child {
          box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(0, 0, 0, 0.03) inset;
        }
      }
    }

    .actions {
      width: 100%;
      height: 50rpx;
      margin-top: 29rpx;
      padding-bottom: 40rpx;
      display: flex;
      justify-content: space-between;

      .action {
        width: 288rpx;
        height: 48rpx;
        background-color: #395cf5;
        border-radius: 20rpx;
        text-align: center;
        line-height: 48rpx;
        font-size: 26rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 48rpx;
        color: #ffffff;

        text {
          &:first-child {
            margin-right: 20rpx;
          }
        }
      }

      .search {
        background-color: #1534ce;
      }
    }

    .form {
      width: 100%;
      padding: 0 75rpx;
      padding-top: 40rpx;
      box-sizing: border-box;

      .form-item {
        width: 600rpx;
        height: 48rpx;
        border-radius: 20rpx;
        border: solid 2rpx #1534ce;
        margin: 0 auto;
        margin-bottom: 25rpx;

        &:last-child {
          margin-bottom: 34rpx;
        }

        @include clear();

        .label {
          float: left;
          width: 134rpx;
          height: 48rpx;
          text-align: center;
          line-height: 44rpx;
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: #1534ce;
        }

        .shape {
          width: 3rpx;
          height: 32rpx;
          background-color: #7f98ae;
          float: left;
          margin-top: 8rpx;
        }

        .input {
          float: left;
          width: calc(100% - 134rpx - 3rpx);

          .input-body {
            box-sizing: border-box;
            width: 100%;
            height: 44rpx;
            padding: 0 !important;
            border: none;
            padding-left: 30rpx !important;
            padding-right: 30rpx !important;
            font-size: 26rpx;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0rpx;
            color: rgba(0, 0, 0, 0.7);
          }

          .input-placeholder {
            font-size: 26rpx;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0rpx;
            color: rgba(0, 0, 0, 0.5);
          }
        }
      }
    }

    .total {
      box-sizing: border-box;
      padding: 0 70rpx;
      height: 80rpx;
      line-height: 70rpx;
      font-size: 22rpx;
      font-weight: normal;
      font-stretch: normal;
      line-height: 80rpx;
      letter-spacing: 0rpx;
      color: #3b3c40;
    }

    .charts {
      width: 100%;
      box-sizing: border-box;
      height: 315rpx;
      padding: 0 70rpx;
      padding-left: calc(70rpx - 15px);
      margin-bottom: 30rpx;

      #echarts {
        width: 100%;
        height: 100%;
      }
    }

    .top-tab {
      width: 670rpx;
      margin-left: 40rpx;
      height: 52rpx;
      line-height: 52rpx;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 30rpx;
      margin-top: 15rpx;
      border-bottom: solid 3rpx #f2f2f0;

      .item {
        font-size: 26rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 50rpx;
        letter-spacing: 0rpx;
        color: #d8d8d5;
        position: relative;

        .shape {
          opacity: 0;
          transform: translateY(6rpx);
          position: absolute;
          bottom: -6rpx;
          width: 100%;
          height: 8rpx;
          background-color: #1534ce;
          border-radius: 8rpx;
          transition: 0.3s ease;
        }
      }

      .item__active {
        color: #3b3c40;

        .shape {
          opacity: 1;
          transform: translateY(0rpx);
        }
      }
    }
  }
}
</style>
